/**
 * 
 */
~(function() {
    var window = this || (0, eval)('this');
    var FONTSIZE = function() {
        return parseInt(document.body.currentStyle ? document.body.currentStyle['fontSize'] : getComputedStyle(document.body, false)['fontSize']);
    }();
    var VM = function() {
        var Method = {
            progressbar: function(dom, data) {
                var progress = document.createElement('div'),
                    param = data.data;
                progress.style.width = (param.position || 100) + '%';
                dom.className += ' ui-progressbar';
                dom.appendChild(progress);
            },
            slider: function(dom, data) {
                var bar = document.createElement('span'),
                    progress = document.createElement('div'),
                    totleText = null,
                    progressText = null,
                    param = data.data,
                    width = dom.clientWidth,
                    left = dom.offsetLeft,
                    realWidth = (param.position || 100) * width / 100;
                dom.innerHTML = '';
                if (param.totle) {
                    text = document.createElement('b');
                    progressText = document.createElement('em');
                    text.innerHTML = param.totle;
                    dom.appendChild(text);
                    dom.appendChild(progressText);
                }
                setStyle(realWidth);
                dom.className += ' ui-slider';
                dom.appendChild(progress);
                dom.appendChild(bar);
                function setStyle(w) {
                    progress.style.width = w + 'px';
                    bar.style.left = w - FONTSIZE / 2 + 'px';
                    if (progressText) {
                        progressText.style.left = w - FONTSIZE / 2 * 2.4 + 'px';
                        progressText.innerHTML = parseFloat(w / width * 100).toFixed(2) + '%';
                    }
                }
                // 创建组建逻辑、按下鼠标拨片
                bar.onmousedown = function() {
                    document.onmousemove = function(event) {
                        var e = event || window.event;
                        var w = e.clientX - left;
                        setStyle(w < width ? (w > 0 ? w : 0) : width);
                    }
                    // 阻止页面滑动选取事件
                    document.onselectstart = function() {
                        return false;
                    }
                }
                // 停止滑动交互，鼠标按键松开
                document.onmouseup = function() {
                    document.onmousemove = null;//取消文档鼠标光标移动事件
                    document.onselectstart = null;//取消文档滑动选取事件
                }
            }
        };

        // 获取视图层组件渲染数据的映射信息
        function getBindData(dom) {
            var data = dom.getAttribute('data-bind');
            return !!data && (new Function('return ({' + data + '})'))();
        }

        return function() {
            var doms = document.body.getElementsByTagName('*'),
                ctx = null;
            for(var i = 0; i < doms.length; i++) {
                ctx = getBindData(doms[i]);
                ctx.type && Method[ctx.type] && Method[ctx.type](doms[i], ctx);
            }
        }();
    };

    window.VM = VM;
})();

var demo1 = {
    position: 60,
    totle: 200
},
demo2 = {
    position: 20
},
demo3 = {
    position: 50
};

window.onload = function() {
    VM();
}
